console.log(Swiper)
const swiper = new Swiper('.swiper', {
    // autoplay: true,//等同于以下设置
    autoplay: {
        delay: 2000,
        stopOnLastSlide: false,
        disableOnInteraction: true,
    },
    effect: 'coverflow',
    // slidesPerView: 3,
    // centeredSlides: true,
    loop: true, // 循环模式选项
    // 如果需要分页器
    pagination: {
        el: '.swiper-pagination',
        clickable: true,
    },
    // 如果需要前进后退按钮
    navigation: {
        nextEl: '.swiper-button-next',
        prevEl: '.swiper-button-prev',
    }

})


function getNetwork(list) { //获取列表列表数据
    $.ajax({
        url: 'http://www.xiongmaoyouxuan.com/api/tab/1/feeds?start=' + startNum,
        type: 'get',
        success: function (res) {
            showProduct(res.data.list)
        },
        error: function (error) {
            alert('网络错误')
        }
    })
}


function getNetwork(pageNo) { //获取商品列表数据
    let startNum = pageNo * 20
    $.ajax({
        url: 'http://www.xiongmaoyouxuan.com/api/tab/1/feeds?start=' + startNum,
        type: 'get',
        success: function (res) {
            showProduct(res.data.list)
        },
        error: function (error) {
            alert('网络错误')
        }
    })
}

let listAll = [] //用于拼接数据
function showProduct(ProductList) { //渲染商品列表
    listAll = [...listAll, ...ProductList]
    let arr = listAll.map(item => {
        return `
        <li class="pro-item" onclick="onDetail(${item.id})">
            <img src="${item.image}">
            <p>${item.title}</p>
            <div class="pro-merchant">
                <span class="left">天猫</span>
                <span class="right">包邮</span>
            </div>
            <div class="pro-sales">
                <span class="left-money">￥</span>
                <span class="left">${item.price}</span>
                <span class="right">${item.saleNum}人已买</span>
                <span class="tickt">${item.couponValue}</span>
        </div>
        `
    })
    let str = arr.join('')
    $('#fixedList>ul').html(str)
}

function onLoadMore() {
    let pageNo = 1
    getNetwork(pageNo)
    $('.SeeMore>div').on('click', function () {
        getNetwork(++pageNo)
    })
}

function onDetail(id) {
    location.href = './datetil.html?id=' + id
}


function outputTop() { //回到顶部
    let i = document.documentElement.scrollTop
    let timer = setInterval(function () {
        i = i - 20
        if (i <= 0) {
            clearInterval(timer)

        }
        document.documentElement.scrollTop = i
    }, 1)
}

window.onscroll = function () {
    console.log('浏览器');
    let i = document.documentElement.scrollTop
    console.log(i);
    if (i <= 0) {
        $('#return').css('display', 'none')
    } else {
        $('#return').css('display', 'block')
    }
}

function commodityTab() { //列表鼠标事件
    $('.list>ul>li').mouseover(function () {
        console.log('移入');
        $(this).addClass('bgColor')
        $('.commodityBox').css('display', 'block')
        let dataIndexNum = $(this).attr('data-index')
        console.log(dataIndexNum);
        let dataIndexNuArr = dataIndexNum.split('-')
        console.log(dataIndexNuArr);
        console.log(dataIndexNuArr.length, '长度');
        $('.commodityBoxIn').html('')
        for (let i = 0; i < dataIndexNuArr.length; i++) {
            console.log('for循环');

            function getNetwork() { //获取商品列表数据
                $.ajax({
                    url: `http://www.xiongmaoyouxuan.com/api/tab/${dataIndexNuArr[i]}?start=0`,
                    type: 'get',
                    success: function (res) {
                        showProduct(res.data)
                        // console.log('res',res);
                    },
                    error: function (error) {
                        alert('网络错误')
                    }
                })
            }

            function showProduct(data) { //渲染商品列表
                console.log('渲染商品列表');
                console.log(data);
                let arr = `<h2>${data.category.name}</h2>`

                let str = data.categories.map(item => {
                    return `<span>${item.title}</span>`
                }).join('');

                let listStr = `
                    <div class="commodityBoxButten">
                            ${arr}
                            <p>${str}</p>
                    </div>                    
                    `
                // console.log(listStr);
                $('.commodityBoxIn').append(listStr)
            }
            getNetwork()

        }



    })
    $('.list').on('mouseout', 'li', function () {
        console.log('移出');
        $(this).removeClass('bgColor')
        $('.commodityBox').css('display', 'none')
    })
}



commodityTab() //列表鼠标事件
onLoadMore() //跳转